<html lang="en">
<head>
    <title>test</title>
    <style>
        .test-container{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            flex-wrap: wrap;
        }
    </style>
</head>
<body>
<div class="test-container">
    <div :style="{display: main_show}">
        <div style="width: 100%;text-align: center">
            <h1>Amazon Test</h1>
        </div>
        <div style="margin-top: 5vh">
            <label>
                <div>
                    <span>username:</span>
                    <input v-model="username">
                </div>
                <div>
                    <span>password:</span>
                    <input v-model="password" type="password">
                </div>
                <input @click="Submit()" type="button" value="submit" style="margin-top: 5vh; height: 5vh; width: 100%">
            </label>
        </div>
    </div>
    <div :style="{display: reminder_show}">
        <h1 v-html="title"></h1>
        <p v-html="cookies"></p>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<!-- Optional: include a polyfill for ES6 Promises for IE11 and Android browser -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>
<script>
    new Vue({
        delimiters:['[[',']]'],
        el: '.test-container',
        data: {
            username: '',
            password: '',
            main_show: "",
            reminder_show: "none",
            title: "Please wait for a moment...",
            cookies: ""
        },
        mounted(){
            console.log("Beginning");
        },
        methods:{
            change:function (){
                this.main_show = "";
                this.reminder_show = "none";
            },
            Submit:function () {
                if (this.username === ""){
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'Please input Username and Password !',
                    });
                }else if(this.password === ""){
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'Please input Username and Password !',
                    });
                }
                else {
                    this.main_show = "none";
                    this.reminder_show = "";
                    console.log(this.username);
                    console.log(this.password);
                    Swal.fire(
                        'Success!',
                        'Getting the cookie...',
                        'success'
                    );
                    $.ajax({
                        url:'/test/',
                        type:'POST',
                        data:{
                            'username':this.username,
                            'password':this.password,
                        },
                        dateType:'json'
                    }).done(function (res) {
                        if (res ==='404'){
                            Swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Please input Username and Password !',
                            });
                            this.change()
                        }
                        else {
                            Swal.fire(
                                'Success!',
                                'Success get the Cookies!',
                                'success'
                            );
                            console.log(res);
                            this.title = "Cookies";
                            this.cookies = res
                        }

                    }).fail(function () {
                        Swal.fire({
                            type: 'error',
                            title: 'Oops...',
                            text: 'Connection Failed!',
                            footer: '<a @click="change()">try again</a>'
                        });
                        console.log("Connection Failed");
                        this.change()
                    });
                }

            }
        }
    });
</script>
</body>
</html>